{% extends 'base_with_top_menu.html' %}

{% load go_back_link %}

{% block title %}{{ book.title }}{% endblock %}

{% block header %}{% if for_whom %} {{ for_whom }} {% else %} Book copies {% endif %} {% endblock %}

{% block content %}

<div class="book_contentWrapper">

    <h2>Title: {{ book.title }}</h2>

    {% if perms.baseapp.change_book %}
    <div class="edit_book"><a href="{% url book_edit book.id %}" title="Edit this book"><span>edit</span></a></div>
    {% endif %}
    
    <div class="book_authors">
        <dt>Authors:</dt>
        {% if book.authors %}
        <dd>{{ book.authors|join:', '}}</dd>
        {% else %}
        <dd>No authors.</dd>
        {% endif %}
    </div>

    <div class="book_categories">
      <dt>Categories:</dt>
      {% if book.categories %}
      <dd>{{ book.categories|join:", " }}</dd>
      {% else %}
      <dd>This book wasn't assigned to any category.</dd>
      {% endif %}
    </div>

    {% if display_tips %}
    <div class="tip">
      <p>1. If you use Firefox or Opera you can click and drag to multiselect locations. In Chrome you can use CTRL+click</p>
      <p>2. Selecting "Any" has effect if and only if nothing else is selected. If "Any" and sth else is selected, then "Any" would be deselected</p>
    </div>
    {% endif %}

    
    <div class="inner_menu">
      <ul>
        {% if perms.baseapp.change_bookcopy %}
          <li><a href="{% url book_edit book.id %}" title="Edit this book">Edit this book</a></li>
        {% endif %}
        {% if perms.baseapp.add_bookcopy %}
          <li><a href="{% url copy_add book.id %}" class="add_bookcopy">Add another copy</a></li>
        {% endif %}
        {% if perms.baseapp.add_bookrequest %}
          <li><a href="{% url bookrequest_add_copy book.id %}" class="request_copy">Request another copy</a></li>
        {% endif %}
    </div>


    {% if search.locations %}
    <div class="search">
        <h3 id="search">Search</h3>
    
        <div class="content_form">      
            <form class="copy_search" action=".#book_copies" method="post" name="Flocations">
                <table>
                    <tr>
                        <td>Location: <br />
                        <select id="location" name="location" multiple="multiple" size="{{ search.copies_location_select_size }}">
                                {% for location in search.locations %}
                                    <option value="{{ location.id }}" {% if location.selected %}selected{% endif %}>{{ location.name }}</option>
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <input type="checkbox" id="available" name="available" value="available" {% if only_available_checked %} checked="checked" {% endif %} >
                            <label for="available">Only available:</label>
                        </td>
                    </tr>
                    <tr>
                      <td></td>
                      <td>
                        <input type="submit" name="action" value="Search">
                      </td>
                    </tr>
                </table>
            </form>
        </div>
        <script type="text/javascript">
          document.Flocations.location.focus();
        </script>
    
        {% else %}
        <!-- <p>No locations defined.</p> -->
        {% endif %}
    </div>
    
    {% comment %}
    If no argument is specified, then default one will be loaded - which is set in Config.
    Try typing:
    {% go_back_link %}
    {% go_back_link "Go back" %}
    {% endcomment %}

    <div class="book_copies">
      <h3 id="book_copies">Copies of this book:</h3>

        {% if book.items %}

            <!-- TIME BAR controls -->
            {% if display_time_bar %}
            {% include "time_bar/controls.html" %}
            {% include "time_bar/symbology.html" %}
            {% endif %}

            <!-- LIST OF COPIES -->
            <center>
            <table id="booklist" class="tablesorter tb_booklist">
                <thead>
                  <tr>
                    <th title="aka Shelf mark">ID</th>
                    <th>State</th>
                    <th>Publisher</th>
                    <th>Year</th>
                    <th>Location</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>

                {% for item in book.items %}

                    <!-- TIME BAR for copy -->
                    {% if item.tb_code and display_time_bar %}
                    <tr id="tr_{{item.shelf_mark}}"><td colspan="7" style="padding:0;">
                        {% autoescape off %}
                        {{ item.tb_code }}
                        {% endautoescape %}
                    </td></tr>
                    {% endif %}

                    <!-- COPY's DETAILS -->
                    <tr class="copy_details">
                        <td class="shelfmark"><a href='../../bookcopy/{{ item.id }}/'>{{ item.shelf_mark }}</a></td>
                        <td class="state"><span title="{{item.state.description|default:"No description"}}">{{ item.state }}</span> {% if not item.is_available %}<span class="unavailable" title="Unavailable, sorry"><br/>(unavailable)</span>{%endif%}</td>
                        <td class="publisher">{{ item.publisher|default:"-" }}</td>
                        <td class="year">{{ item.year|default:"-" }}</td>
                        {% if perms.baseapp.view_location %}
                        <td class="location"><a href="{%url location_one item.location.id %}" title="{{item.maintainers}}">{{ item.location }}</a></td>
                        {% else %}
                        <td class="location">{{ item.location|default:"-" }}</td>
                        {% endif %}
                        <td class="actions">
                            <ul class="actions">
                                {%if perms.baseapp.change_bookcopy %}
                                <li class="edit">
                                    <a href="{% url copy_edit item.id %}">Edit</a> 
                                </li>
                                {%endif%}
                                {%if item.is_reservable and item.is_available %}
                                <li class="reserve">
                                    <a href='../../bookcopy/{{ item.id }}/reserve/'
                                       {% if not item.is_available %}class="unavailable" title="Book is unavailable"{% endif %}>
                                    Reserve
                                </a></li> 
                                {% endif %}
                            </ul>
                        </td>
                    </tr>

                {% endfor %}
                </tbody>
            </table>
            </center>
        {% else %}
            <br><b>No copies.</b>
        {% endif %}
    </div>

    <script type='text/javascript'>
    <!--
        $(document).ready(function()
        {
            var posX = 0;
            var posY = 0;
            
            $(".green").mousemove(function(e)
            {
                if (!e) var e = window.event;
                $("#cloud").html($('input[name=val]', this).val());
                $("#cloud").show();
                if (e.pageX || e.pageY)
                {
                    posX =  e.pageX - document.body.scrollLeft -
                            document.documentElement.scrollLeft + 10;
                    posY = e.pageY - document.body.scrollTop -
                            document.documentElement.scrollTop - 30;
                }
                else
                    if (e.clientX || e.clientY)
                    {
                        posX = e.clientX + 10;
                        posY = e.clientY - 30;
                    }
                $('#cloud').css({'left': posX, 'top': posY}); 
            });            
            $(".green").mouseout(function()
            {
                $("#cloud").hide(); 
            });
            $(".red").mousemove(function(e)
            {
                
                if (!e) var e = window.event;
                $("#cloud").html($('input[name=val]', this).val());
                $("#cloud").show();
                if (e.pageX || e.pageY)
                {
                    posX =  e.pageX - document.body.scrollLeft -
                            document.documentElement.scrollLeft + 10;
                    posY = e.pageY - document.body.scrollTop -
                            document.documentElement.scrollTop - 30;
                }
                else
                    if (e.clientX || e.clientY)
                    {
                        posX = e.clientX + 10;
                        posY = e.clientY - 30;
                    }
                $('#cloud').css({'left': posX, 'top': posY}); 
            });            
            $(".red").mouseout(function()
            {
                $("#cloud").hide(); 
            })
        })
    //-->
    </script>
    <div id="cloud" class='cloud'></div>

</div>
{% go_back_link %}
{% endblock %}
